import React, { useEffect, useState } from 'react';
import { Button, Input, Form, Picker, Notify } from 'react-vant'
import { useRequest } from 'ahooks'
import { getDepartmentList, getEmailCode, getJobList, register } from '../../api';
import { DepartmentItemType, JobItemState, RegisterParamsType } from '../../types';
import { debounce } from 'lodash'
import { encryptedData } from '../../utils';
const countMax = 60
const Index: React.FC = () => {
  const [state, setState] = useState<number>(1);
  const [form] = Form.useForm();
  const onFinish = async (values: RegisterParamsType) => {
    values.departmentId = departmentList.find(v => v.departmentName == values.departmentId.toString())!.id
    values.jobTitleId = jobList.find(v => v.jobTitle == values.jobTitleId.toString())!.id
    values.pwd1 = encryptedData(values.pwd1);
    values.pwd2 = values.pwd1
    const resp = await register(values);
    const { status, message } = resp.data;
    if (status === '0000') {

    } else {
      Notify.show({ type: 'danger', message })
    }
    console.log(resp)
  }
  // 科室列表
  const { data: departmentList = [] } = useRequest(async () => {
    const resp = await getDepartmentList();
    return resp.data.result as DepartmentItemType[]
  })

  // 职称列表
  const { data: jobList = [] } = useRequest(async () => {
    const resp = await getJobList();
    return resp.data.result as JobItemState[]
  })

  // 获取验证码
  const getEmailCodeApi = debounce(async () => {
    const email = form.getFieldValue('email');
    const resp = await getEmailCode({ email: email });
    const { message, status } = resp.data
    if (status === '0000') {
      Notify.show({ type: 'success', message });
      curtDownTime()
    } else {
      Notify.show({ type: "danger", message })
    }
  }, 400)

  // 倒计时
  const [count, setCount] = useState(countMax)
  // 倒计时函数
  const curtDownTime = () => {
    const timer = setInterval(() => {
      setCount((value) => {
        if (value === 1) {
          clearInterval(timer);
          return countMax
        }
        return value - 1
      });

    }, 1000)
    setCount(value => value - 1)
  }
  return (
    <div>
      <Form
        layout='vertical'
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button onClick={() => setState(state + 1)} style={{ display: state !== 3 ? 'block' : 'none' }} round type='primary' block>
              下一步
            </Button>
            <Button style={{ display: state === 3 ? 'block' : 'none' }} round nativeType='submit' type='primary' block>
              提交
            </Button>
          </div>
        }
      >
        <div style={{ display: state === 1 ? 'block' : 'none' }}>
          <Form.Item
            rules={[{ required: true, message: '请填写用户名' }]}
            name='name'
            label='用户名'
          >
            <Input placeholder='请填写用户名' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请填写医院名称' }]}
            name='inauguralHospital'
            label='医院名称'
          >
            <Input placeholder='请填写医院名称' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请选择科室名称' }]}
            name='departmentId'
            label='科室名称'
            trigger='onConfirm'
            onClick={(_, action) => {
              action?.current?.open()
            }}
          >
            <Picker
              popup
              columns={departmentList.map(v => ({ text: v.departmentName, value: v.departmentName }))}
            >
              {val => val || '请选择科室名称'}
            </Picker>
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请选择职位名称' }]}
            name='jobTitleId'
            label='职位名称'
            trigger='onConfirm'
            onClick={(_, action) => {
              action?.current?.open()
            }}
          >
            <Picker
              popup
              columns={jobList.map(v => ({ text: v.jobTitle, value: v.jobTitle }))}
            >
              {val => val || '请选择职位名称'}
            </Picker>
          </Form.Item>
        </div>

        <div style={{ display: state === 2 ? 'block' : 'none' }}>
          <Form.Item
            rules={[{ required: true, message: '请填写邮箱' }]}
            name='email'
            label='邮箱'
          >
            <Input placeholder='请填写邮箱' suffix={<Button disabled={count !== countMax} onClick={getEmailCodeApi} size="small" type="primary">{count === countMax ? '获取验证码' : count + '之后获取'}</Button>} />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请填写验证码' }]}
            name='code'
            label='验证码'
          >
            <Input placeholder='请填写验证码' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请填写密码' }]}
            name='pwd1'
            label='密码'
          >
            <Input placeholder='请填写密码' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请填写重复密码' }]}
            name='pwd2'
            label='重复密码'
          >
            <Input placeholder='请填写重复密码' />
          </Form.Item>
        </div>

        <div style={{ display: state === 3 ? 'block' : 'none' }}>
          <Form.Item name='personalProfile' label='个人简介'>
            <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit />
          </Form.Item>
          <Form.Item name='goodField' label='擅长领域'>
            <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit />
          </Form.Item>
        </div>
      </Form>


    </div>
  )
}


export default Index